<template>
  <yd-layout class="page-login">
    <form class="login__form">
      <div class="page-title"><span></span> <lang></lang></div>
      <div class="login__form_header">
        <img
          class="login__form-logo"
          :src="require('../assets/images/logo.png')"
        />
        <h1 class="login__form-platformName">正崴供应链管理平台</h1>
      </div>
      <div class="login__form_body">
        <div class="login__form_item">
          <label for="loginName" class="login__form-label">{{
            $t("message.account")
          }}</label>
          <input
            type="text"
            :placeholder="$t('message.accountPlaceholder')"
            class="login__form-input"
            id="loginName"
            @blur="upperCase"
            v-model="reqParams.loginName"
          />
        </div>
        <div class="login__form_item">
          <label for="password" class="login__form-label">{{
            $t("message.password")
          }}</label>
          <input
            type="password"
            :placeholder="$t('message.passwordPlaceholder')"
            class="login__form-input"
            id="password"
            v-model="reqParams.password"
          />
        </div>
        <div class="login__form_getCode">
          <div class="login__form_getCodeCt">
            <label for="captcha" class="login__form-label">{{
              $t("message.captcha")
            }}</label>
            <input
              type="text"
              :placeholder="$t('message.captchaPlaceholder')"
              class="login__form-input"
              id="captcha"
              v-model="reqParams.captcha"
            />
          </div>
          <img
            class="login__form-getCodeImg"
            :src="captchaAddr"
            @click="replaceCaptchaEvent"
          />
        </div>
        <button
          type="button"
          :class="{
            'login__form-btn': true,
            'f-ing': isLoginIng
          }"
          @click="loginEvent"
        >
          {{ $t("message.login") }}
        </button>
      </div>
    </form>
    <!-- 弹窗信息 -->
    <alert :messagePopup.sync="child_messagePopup"> </alert>
  </yd-layout>
</template>

<script>
import { api__login_v2 } from "../api";
import lang from "../components/lang";
import alert from "../components/alert";

export default {
  name: "login",
  components: {
    lang,
    alert
  },
  data() {
    return {
      captchaAddr: `${process.env.BASE_API}/captcha`, // 验证码地址
      isLoginIng: false,
      reqParams: {
        loginName: "",
        password: "",
        captcha: "",
        sid: "",
        openid: ""
      },
      child_messagePopup: {
        isShow: false,
        type: "success",
        title: "标题",
        text: "描述"
      }
    };
  },
  methods: {
    //账号自动变为大写
    upperCase(){
      var loginName=this.reqParams.loginName;
      this.reqParams.loginName=loginName.toUpperCase();
    },
    // 点击验证码 进行更换
    replaceCaptchaEvent() {
      this.captchaAddr = `${
        process.env.BASE_API
      }/captcha?v=${new Date().getTime()}`;
    },
    // 登录事件
    async loginEvent() {
      if (!this.isLoginIng) {
        // 防止重复发送
        if (!this.reqParams.loginName) {
          this.child_messagePopup = {
            isShow: true,
            type: "error",
            title: this.$t("message.tips"),
            text: this.$t("message.nameOrEmailNotEmpty")
          };
        } else if (!this.reqParams.password) {
          this.child_messagePopup = {
            isShow: true,
            type: "error",
            title: this.$t("message.tips"),
            text: this.$t("message.passwordNotEmpty")
          };
        } else if (!this.reqParams.captcha) {
          this.child_messagePopup = {
            isShow: true,
            type: "error",
            title: this.$t("message.tips"),
            text: this.$t("message.captchaNotEmpty")
          };
        } else {
          this.isLoginIng = true;
          try {
            this.reqParams.sid = this.$storage.get("sid");
            this.reqParams.openid = this.$storage.get("openid");

            let {
              data: { token, user }
            } = await api__login_v2(this.reqParams);
            this.$storage.set({ token, userInfo: user });
            this.$router.push({ name: "index" });
          } catch (err) {
            this.child_messagePopup = {
              isShow: true,
              type: "error",
              title: this.$t("message.LoginFailure"),
              text: err.msg
            };
            this.replaceCaptchaEvent();
          }
          this.isLoginIng = false;
        }
      }
    }
  }
};
</script>
